<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="https://www.thymeleaf.org" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link th:href="@{/css/shop.css}" type="text/css" rel="stylesheet" />
<link th:href="@{/css/Sellerber.css}" type="text/css"  rel="stylesheet" />
<link th:href="@{/css/bkg_ui.css}" type="text/css"  rel="stylesheet" />
<link th:href="@{/font/css/font-awesome.min.css}"  rel="stylesheet" type="text/css" />
<script th:src="@{/js/jquery-1.9.1.min.js}" type="text/javascript" ></script>

<script th:src="@{/js/echarts.js}" type="text/javascript"></script>
<script th:src="@{/js/china.js}" type="text/javascript"></script>


<script type="text/javascript" th:src="@{/js/Validform/Validform.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.cookie.js}"></script>
<script th:src="@{/js/shopFrame.js}" type="text/javascript"></script>
<script th:src="@{/js/Sellerber.js}" type="text/javascript"></script>
<script th:src="@{/js/layer/layer.js}" type="text/javascript"></script>
<script th:src="@{/js/laydate/laydate.js}" type="text/javascript"></script>
<script th:src="@{/js/dist/echarts.js}"></script>
</head>

<body>
    <!--<div id="main" style="width:100%; overflow:auto; overflow:hidden"></div>-->
    <div id="main" style="height: 550px;width: 100%;"></div>
</body>
</html>
<script>
    var zhi=[];
    var myChart;

    $(function () {
        $.getJSON("/mainOrder/getSumBySheng",function (r) {
            zhi=[];
            $.each(r,function (key,value) {
                zhi.push({name: key,value: value});
            });

            myChart=echarts.init(document.getElementById('main'));
            init();
        })
    })


    function init(){
        Option={
            title : {
                text: '各城市销量',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:['销售额']
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                left: 'right',
                top: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series : [
                {
                    name: '销售额',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:zhi
                }
            ]
        };
        myChart.setOption(Option)
    }


</script>